<template>
    <div class="btn">
        <div class="div1" @click="shouye">
            <i class="iconfont icon-shouye"></i>
            </div>
    <div class="div2" @click="shop"> 
            <p><i class="iconfont icon-gouwuche"></i> </p>
        </div>
        <div class="div3" @click='add' >加入购物车</div>



    </div>
</template>

    <script>
    export default {
        props:{
            datashopp:{
                type:Object
            }
        },
        data(){
            return {
                dataList:[]
            }
        },
        methods:{
            add(){
                console.log(this.datashopp);
                this.$store.commit('add',this.datashopp);
                this.$store.commit('getisflag2',false);

            },
        shouye(){
            this.$router.push({name:'homepage'})
        },
        shop(){
            this.$router.push({name:'shoppingcart'})

        }
    },
    created(){
        console.log(this.datashopp)
    }
}
</script>

<style lang='scss' scoped>
 $appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}
.btn{
    width: 100%;
    z-index: 5;
    height: pxtovw(50);
    bottom:pxtovw(0);
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #777;
    .div1{
        width: 100%;
        height: pxtovw(50);
        line-height: pxtovw(50);
        flex: 0 0 20%;
        background-color:white;
         text-align: center;
        
       
        .icon-shouye{
            font-size: pxtovw(26);
             color:#aaa;
        }
     
    }
    .div2{
        width: 100%;
        height: 100%;
        flex: 0 0 20%;
        background-color:white; 
        text-align: center;
        line-height: pxtovw(50);
        color: #333;
        .icon-gouwuche{
              font-size: pxtovw(26);
             color:#aaa;
        }
    }
    .div3{
        width: 100%;
        height: 100%;
        flex: 1;
        background-color:orange; 
        text-align: center;
        line-height: pxtovw(50);
        color: #fff;
    }

}

</style>
